<template>

  <div>
    
<el-tag type="success">时间</el-tag>开始于2020年1月
<el-row>
  
  <el-button  type="primary">2</el-button>
  <el-button type="success">0</el-button>
  <el-button type="info">2</el-button>
  <el-button type="warning">1</el-button>
  
  <el-button type="danger">一切都会过去</el-button>
 <el-progress :percentage="100"></el-progress>
  <el-menu  background-color="#133f">
  <el-menu-item index="1"></el-menu-item>
  
  </el-menu>
  <div class="block">
  <span class="demonstration">只有五星好评才能看我们的内容哦！</span>
  <el-rate v-model="value1"></el-rate>
</div>
<div class="block">
  <span class="demonstration">请给这个页面一个评价吧</span>
  <el-rate
    v-model="value2"
    :colors="colors">
  </el-rate>
</div>
</el-row>
<el-progress :percentage="100"></el-progress>
    <el-table :data="jokes">
<<<<<<< HEAD
      <el-table-column label="国家" prop="country" align="center">
        </el-table-column> 
       <el-table-column  label="省份" prop="province" align="center"></el-table-column>
=======
      <el-table-column label="国家" prop="country" align="center"></el-table-column> 
       <el-table-column label="省份" prop="province" align="center"></el-table-column>
      <el-table-column label="城市" prop="city" align="center"></el-table-column>
      <el-table-column label="区" prop="area" align="center"></el-table-column>
>>>>>>> 8ef39a24cf6d46cce3b664b3597021fce06ba26b
      <el-table-column label="感染人数" prop="confirmed" align="center"></el-table-column>
      <el-table-column label="死亡人数" prop="dead" align="center"></el-table-column> 
      <el-table-column label="治愈人数" prop="outside" align="center" ></el-table-column>
    </el-table>
   <el-popover
  placement="right"
  width="400"
  trigger="click">
  <el-table >
    <el-table-column width="100" property="date" label="李春雨老师"></el-table-column>
    <el-table-column width="100" property="name" label="小组组长姜正"></el-table-column>
    <el-table-column width="100" property="address" label="页面制作者周学庆"></el-table-column>
  </el-table>
  <el-button slot="reference">制作相关！</el-button>
  <el-button type="text" @click="open">点击打开 Message Box</el-button>
</el-popover>
<el-alert
    title=""
    type="success">
  </el-alert>
    <el-progress :percentage="100"></el-progress>
  </div>
  
</template>

<script>
import { get } from '@/utils/request'
export default { 

  // 生命周期
  mounted(){
    
    // 初始化操作
    this.loadJokes();
  },
  
  // 数据
  data(){ return {
        value1: null,
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900']  // 等同于 { 2: '#99A9BF', 4: { value: '#F7BA2A', excluded: true }, 5: '#FF9900' }
      }
     
    return {
      
      jokes:[]
    }
    
  },
  // 方法
 
 methods:{
    
    // 加载笑话数据
    
    loadJokes(){
      // 定义变量，请求地址
      let url = "http://39.105.231.187:8001/epidemic/pageQuery?page=1&pageSize=20"
      // 请求参数
      let param = {
        page:1,
        pagesize:20,
    }
    
      // 请求后台数据
      get(url,this.param).then( resp => {
        // 将返回结果中有价值的信息赋值给jokes, jokes表示所有的笑话
        this.jokes = resp.data.list;
      });
      
      
    }
    
    
  }
  
}
</script>
<style scoped>

</style>